<template>
	<view class="details-Top">
		<image :src="phydateil.image" mode="widthFix"></image>
		<view class="details-price">
			<text>¥{{ phydateil.price }}</text>
			<text>已约{{ phydateil.sales }}</text>
		</view>
		<text class="details-Title">{{ phydateil.title }}</text>
	</view>
	<!-- 预约时段 -->
	<view class="nucleic-time">
		<text class="nucleic-Title">体检时间选择</text>
		<scroll-view scroll-x="true" class="scroll-view_H">
			<view class="nucleic-time-flex">
				<view class="checkstyle" @click="changeTime(item.date)" v-for="(item, index) in phydateil.date">
					<text>{{ item.date }}</text>
					<text>{{ item.week }}</text>
				</view>
			</view>
		</scroll-view>
	</view>
	<!-- 适用人群 -->
	<view class="nucleic-time">
		<text class="nucleic-Title">适用人群</text>
		<view class="nucleic-crowd">
			<view v-for="(item, index) in phydateil.crowd">
				<image :src="item.image" mode="aspectFill"></image>
				<text>{{ item.name }}</text>
			</view>
		</view>
	</view>
	<!-- 套餐项目 -->
	<view class="nucleic-time">
		<view class="nucleic-Title">套餐项目</view>
		<view class="project-view">
			<block v-for="(item, index) in phydateil.project">
				<text class="project-Title">{{ item.title }}</text>
				<view class="project-card" v-for="(m, i) in item.content">
					<view>{{ m.thing }}</view>
					<view>{{ m.details }}</view>
				</view>
			</block>
		</view>
	</view>
	<!-- 提交 -->
	<view style="height:300rpx"></view>
	<view class="Total-view">
		<text>检测费用：¥600</text>
		<text @click="choicePatient">选择成员</text>
	</view>
	<!-- 弹窗选择成员 -->
	<seMember :subData="insertData" />
	<!-- 骨架屏 -->
	<!-- <skIndex v-if="skeLeton"></skIndex> -->
</template>
  
<script setup lang="ts">
// 1.引入基础模块
import { onLoad } from "@dcloudio/uni-app";
import { reactive, ref, toRefs } from 'vue'
// 引入弹窗组件
import seMember from '@/components/seMember.vue'
import { reqPhydateil } from "@/serve/api"
import { phyDeatilType } from "@/types/index"
import { tip } from "@/utils/tip"


// 2.定义页面响应式数据
let pageData = reactive({
	phydateil: {} as phyDeatilType,
	insertData: {
		phy_name: "",//套餐名称
		phy_time: "",//体检时间
		patient_id: "",//就诊人
		buffer: false
	}
})

// 3.批量解构创建响应式数据
let { phydateil, insertData } = toRefs(pageData)

// 4.根据详情id获取详情数据
onLoad(async (option) => {
	let res = await reqPhydateil({ id: option!.id })
	console.log(res)
	pageData.phydateil = res.data[0]
	pageData.insertData.phy_name = res.data[0].title

})

// 5.选择检测时间
function changeTime(time: string) {
	pageData.insertData.phy_time = time//存储体检预约时间
}


// 选择成员唤起子组件弹窗
function choicePatient() {
	// 检测是否能选择体检时间
	if (pageData.insertData.phy_time == "") {
		tip('请先选择体检时间', 'error'); return;
	}

	// 显示弹窗
	pageData.insertData.buffer = true

}


</script>
  
  
<style>
/* 表单提交 */
@import url('../../common-style/form.css');
/* 预约时间段 */
@import url('../../common-style/nucleic-time.css');

page {
	background-color: #fafafa;
}

/* 顶部 */
.details-Top {
	background-color: #ffffff;
}

.details-Top image {
	width: 100%;
	height: 400rpx;
	display: block;
}

.details-price {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
}

.details-price text:nth-child(1) {
	font-size: 35rpx;
	font-weight: bold;
	color: #ff5f2c;
}

.details-Title {
	padding: 0 0 20rpx 20rpx;
	display: block;
	font-weight: bold;
	font-size: 35rpx;
}

/* 适用人群 */
.nucleic-crowd {
	display: flex;
	justify-content: space-between;
	padding-top: 20rpx;
}

.nucleic-crowd view {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nucleic-crowd image {
	width: 100rpx;
	height: 100rpx;
	display: block;
	margin-bottom: 10rpx;
	border-radius: 10rpx;
}

/* 套餐项目 */
.project-Title {
	background-color: #f0f2f8;
	display: block;
	border-radius: 10rpx;
	font-weight: bold;
	text-align: center;
	padding: 20rpx 0;
	margin: 20rpx 0;
}

.project-card {
	display: flex;
	flex-wrap: wrap;
}

.project-card view {
	margin: 5rpx;
	background-color: #f0f2f8;
	border-radius: 10rpx;
	padding: 20rpx 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.project-card view:nth-child(1) {
	width: 200rpx;
	margin-left: auto;
}

.project-card view:nth-child(2) {
	flex: 1;
	margin-right: auto;
}

/* 选中加上样式 */
.checkstyle {
	background-color: #2c76ef !important;
	color: #ffffff !important;
}
</style>